<template>
  <div class="container">
    <toolbar :title="$route.meta.title" rightText="退出" @handleRightTextClick="logout" :styleObj="styleObj"></toolbar>
    <div class="full-container">
      <scroll :data="data" @scroll="scroll">
        <users-info></users-info>
        <list></list>
      </scroll>
    </div>
  </div>
</template>

<script>
import Toolbar from '../../../components/Toolbar';
import Scroll from 'components/Scroll';

import UsersInfo from './components/UsersInfo'
import List from './components/List'

import {mapMutations, mapState} from 'vuex';


export default {
  name: 'UsersCenter',
  components: {
    Toolbar,
    Scroll,
    UsersInfo,
    List
  },
  data () {
    return {
      data: [],
      styleObj: {
        color: "#FFF",
        background: "transparent!important"
      }
    }
  },
  computed: {
    ...mapState(['token'])
  },
  methods: {
    logout () {
      this.cleanThisStore()
      this.$router.replace('/login');
    },
    scroll (pos) {
      let opacity = pos.y / -140
      if(opacity <= 0) this.styleObj.color = "#FFF"
      else this.styleObj.color = "#212121"
      
      this.styleObj.background = "rgba(255,255,255, "+opacity+")!important";
    },
    
    ...mapMutations(["cleanThisStore"])
  },
  created () {
    if(this.token == null || this.token == '') {
      this.$router.replace('/login')
    }

  }
}
</script>

<style lang="stylus" scoped>
</style>
